import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import {Link as VanillaLink} from 'vanilla-starter/Link';
import {Link as TailwindLink} from 'tailwind-starter/Link';
import tailwindDocs from 'docs:tailwind-starter/Link';
import '../../tailwind/tailwind.css';

export const tags = ['anchor', 'hyperlink', 'href'];
export const relatedPages = [{'title': 'useLink', 'url': 'Link/useLink.html'}];
export const description = 'Allows a user to navigate to another page or resource within a web page or application.';

# Link

<PageDescription>{docs.exports.Link.description}</PageDescription>

<ExampleSwitcher>
  <VisualExample
    component={VanillaLink}
    docs={docs.exports.Link}
    links={docs.links}
    props={['children', 'isDisabled']}
    initialProps={{children: 'The missing link', href: 'https://www.imdb.com/title/tt6348138/', target: '_blank'}}
    type="vanilla"
    files={["starters/docs/src/Link.tsx", "starters/docs/src/Link.css"]} />
  <VisualExample
    component={TailwindLink}
    docs={tailwindDocs.exports.Link}
    links={tailwindDocs.links}
    props={['children', 'variant', 'isDisabled']}
    initialProps={{children: 'The missing link', href: 'https://www.imdb.com/title/tt6348138/', target: '_blank'}}
    type="tailwind"
    files={["starters/tailwind/src/Link.tsx"]} />
</ExampleSwitcher>

## Events

Links with an `href` will be handled by the browser, or via a [client side router](./frameworks). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.

```tsx render
"use client";
import {Link} from 'vanilla-starter/Link';

<Link onPress={() => alert('Pressed link')}>Link</Link>
```

## API

<PropTable component={docs.exports.Link} links={docs.links} />
